<template>
    <div style="padding: 6px; box-sizing: border-box;">

        <el-card style="width: 100%;height: 225px;overflow-y: scroll;">
            <el-form :inline="true" style="margin-top: 0px;" :model="queryParams">
                <el-form-item label="股票信息">
                    <el-input style="width: 160px;" v-model="queryParams.name" placeholder="股票简称或者代码" clearable />
                </el-form-item>
                <el-form-item label="所处行业">
                    <el-select style="width: 160px;" v-model="queryParams.hy" placeholder="请选择所处行业" filterable
                        clearable>
                        <el-option v-for="item in productList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="公告日期区间">
                    <el-date-picker format="YYYY年MM月DD日" style="width: 300px;" v-model="queryParams.ggrq"
                        type="daterange" range-separator="到" start-placeholder="公告开始日期" end-placeholder="公告结束日期" />

                </el-form-item>
                <el-form-item label="净利润">
                    <el-input v-model="queryParams.minjlr" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxjlr" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                </el-form-item>
                <el-form-item label="净利同比增长">
                    <el-input v-model="queryParams.minjltbzz" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxjltbzz" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                </el-form-item>
                <el-form-item label="销售毛利率">
                    <el-input v-model="queryParams.minxsmlv" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxsmlv" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                        
                </el-form-item> 
    
                <el-form-item label="净资产收益率">
                    <el-input v-model="queryParams.minjzcsy" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxjzcsy" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                        
                </el-form-item> 
                <el-form-item label="每股净资产">
                    <el-input v-model="queryParams.minmgjzc" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxmgjzc" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                        
                </el-form-item> 
                <el-form-item label="净利季度环比增长">
                    <el-input v-model="queryParams.minjljdzz" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxjljdzz" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                </el-form-item>
                <el-form-item label="每股收益">
                    <el-input v-model="queryParams.minmgsy" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxmgsy" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                        
                </el-form-item> 
                <el-form-item label="每股经营现金流">
                    <el-input v-model="queryParams.minmgjyxjl" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxmgjyxjl" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                        
                </el-form-item> 
                <el-form-item label="营收同比增长">
                    <el-input v-model="queryParams.minystbzz" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxystbzz" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                        
                </el-form-item> 
                <el-form-item label="营收季度环比增长">
                    <el-input v-model="queryParams.minysjdhbzz" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxysjdhbzz" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                        
                </el-form-item> 
                <el-form-item label="营业收入">
                    <el-input v-model="queryParams.minyysr" placeholder="最小值" style="width: 100px;"
                        @input="validateNumber('minAmount')" />
                    <span style="margin: 0 10px;">-</span>
                    <el-input v-model="queryParams.maxyysr" placeholder="最大值" style="width: 100px;"
                        @input="validateNumber('maxAmount')" />
                </el-form-item> 
                <el-form-item>
                    <el-button @click="handleQuery" type="primary">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>


        <el-card style="width: 100%;margin-top:6px;overflow-y: scroll;" :style="{
            height: sheight+'px'
        }">
            <template #header>
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div> <span style="margin-right: 10px;">数据列表</span>
                        <span style="color:#aaaaaa;font-size: 13px;">共计{{ listInfo.total }}条数据</span>
                    </div>

                    <el-space>
                        <el-button @click="handleCalculate()" v-hasPermiss="rolepathName('sum')"
                            type="success">计算总额</el-button>
                        <el-button @click="handleForm()" v-hasPermiss="rolepathName('add')"
                            type="primary">新增</el-button>
                        <el-button @click="IdataExport()" v-hasPermiss="rolepathName('export')"
                            type="warning">导出</el-button>
                    </el-space>

                </div>
            </template>
    
            <el-table :data="listInfo.list" border :height="sheight-160" style="width: 100%;">

                <el-table-column fixed="left" align="center" prop="序号" width="60px" label="序号" />
                <el-table-column fixed="left" align="center" prop="股票简称" width="140px" label="股票简称">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{ scope.row.股票简称 }}[{{  scope.row.股票代码 }}]
                                </span>
                            </template>

                            <span style="cursor: pointer;">
                                {{ scope.row.股票简称.length > 8 ? scope.row.股票简称.substr(0,
                                    8) + '...' : scope.row.股票简称.toString() }}

                            </span>
                        </el-tooltip>



                    </template>
                </el-table-column>
                
                <el-table-column fixed="left" align="center" prop="所处行业" width="86px" label="所处行业">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{ scope.row.所处行业==null?'未知行业':scope.row.所处行业 }}
                                </span>
                            </template>

                            <span style="cursor: pointer;">
                                {{  scope.row.所处行业==null?'未知行业':     scope.row.所处行业.length > 4 ? scope.row.所处行业.substr(0,
                                    4) + '.' : scope.row.所处行业.toString() }}

                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>
                <el-table-column fixed="left" align="center" sortable prop="最新公告日期" width="136px" label="最新公告日期">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                     {{dayjs(scope.row.最新公告日期*1000).format('YYYY-MM-DD')}}
                                </span>
                            </template>

                            <span style="cursor: pointer;">
                                {{dayjs(scope.row.最新公告日期*1000).format('YYYY-MM-DD')}}

                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>


                <el-table-column align="center" prop="净利润-净利润" sortable width="130px" label="净利润(元)">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{ currency(scope.row['净利润-净利润'], {precision: 2,symbol: '¥'}).format() }}
                                </span>
                            </template>

                            <span :style="{color:scope.row['净利润-净利润']>0?'green':'red'}" style="cursor: pointer;font-weight: bolder;">
                                {{ currency(scope.row['净利润-净利润'] , {precision: 0,symbol: '¥'}).format() }}

                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>
                <el-table-column align="center" prop="净利润-同比增长" sortable width="137px" label="净利同比增长">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{scope.row['净利润-同比增长']? scope.row['净利润-同比增长'].toFixed(2)+'%':'-' }}
                                </span>
                            </template>

                            <span :style="{color:scope.row['净利润-同比增长']>0?'green':'red'}" style="cursor: pointer;font-weight: bolder;">
                                {{scope.row['净利润-同比增长']? scope.row['净利润-同比增长'].toFixed(2)+'%':'-' }}

                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>

                <el-table-column align="center" prop="净利润-季度环比增长" sortable width="164px" label="净利季度环比增长">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{scope.row['净利润-季度环比增长']?scope.row['净利润-季度环比增长'].toFixed(2)+'%':'-'  }}
                                </span>
                            </template>

                            <span :style="{color:scope.row['净利润-季度环比增长']>0?'green':'red'}" style="cursor: pointer;font-weight: bolder;">
                                {{scope.row['净利润-季度环比增长']?scope.row['净利润-季度环比增长'].toFixed(2)+'%':'-'  }}

                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>

                <el-table-column align="center" prop="净资产收益率" sortable width="137px" label="净资产收益率">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{scope.row['净资产收益率']&&scope.row['净资产收益率'].toFixed(2)||'暂无数据'}}%


                                </span>
                            </template>

                            <span :style="{color:scope.row['净资产收益率']>0?'green':'red'}" style="cursor: pointer;font-weight: bolder;" >
                                {{scope.row['净资产收益率']?scope.row['净资产收益率'].toFixed(2)+'%':'-'}}


                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>


                <el-table-column align="center" prop="每股净资产" sortable width="120px" label="每股净资产">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{ currency(scope.row['每股净资产'], {precision: 2,symbol: '¥'}).format() }}
                          
                                </span>
                            </template>

                            <span style="cursor: pointer;">
                                {{ currency(scope.row['每股净资产'], {precision: 2,symbol: '¥'}).format() }}

                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>

                <el-table-column align="center" prop="每股收益" sortable width="110px" label="每股收益">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{ currency(scope.row['每股收益'], {precision: 2,symbol: '¥'}).format() }}
                                </span>
                            </template>

                            <span :style="{color:scope.row['每股收益']>0?'green':'red'}" style="cursor: pointer;font-weight: bolder;" >
                             
                                {{ currency( scope.row['每股收益'] , {precision: 2,symbol: '¥'}).format() }}

                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>
                <el-table-column align="center" prop="每股经营现金流" sortable width="150px" label="每股经营现金流">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{ currency( scope.row['每股经营现金流量'] , {precision: 2,symbol: '¥'}).format() }}
                                </span>
                            </template>

                            <span :style="{color:scope.row['每股经营现金流量']>0?'green':'red'}" style="cursor: pointer;font-weight: bolder;" >
       
                                {{ currency(scope.row['每股经营现金流量'] , {precision: 2,symbol: '¥'}).format() }}
                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>

                <el-table-column align="center" prop="营业收入-同比增长" sortable width="140px" label="营收同比增长">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{scope.row['营业收入-同比增长']? scope.row['营业收入-同比增长'].toFixed(2)+'%':'-' }}
                                </span>
                            </template>

                            <span :style="{color:scope.row['营业收入-同比增长']>0?'green':'red'}" style="cursor: pointer;font-weight: bolder;">
                                {{scope.row['营业收入-同比增长']? scope.row['营业收入-同比增长'].toFixed(2)+'%':'-' }}

                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>
                <el-table-column align="center" prop="营业收入-季度环比增长" sortable width="167px" label="营收季度环比增长">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{scope.row['营业收入-季度环比增长']? scope.row['营业收入-季度环比增长'].toFixed(2)+'%':'-' }}
                                </span>
                            </template>

                            <span :style="{color:scope.row['营业收入-季度环比增长']>0?'green':'red'}" style="cursor: pointer;font-weight: bolder;">

                                {{scope.row['营业收入-季度环比增长']?scope.row['营业收入-季度环比增长'].toFixed(2)+'%':'-' }}
                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>
                <el-table-column align="center" fixed="right" prop="营业收入-营业收入" sortable width="160px" label="营业收入">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{ currency(scope.row['营业收入-营业收入'], {precision: 2,symbol: '¥'}).format() }}
                                </span>
                            </template>

                            <span style="cursor: pointer;color:purple;">
                
                                {{ currency(scope.row['营业收入-营业收入'] , {precision: 0,symbol: '¥'}).format() }}

                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>
                <el-table-column align="center" fixed="right" prop="销售毛利率" sortable width="120px" label="销售毛利率">
                    <template #default="scope">

                        <el-tooltip effect="dark" placement="top">
                            <template #content>
                                <span style="cursor: pointer;">
                                    {{ scope.row['销售毛利率']&&scope.row['销售毛利率'].toFixed(2)+"%"||'-'  }}
                                </span>
                            </template>

                            <span style="cursor: pointer;">
                                {{ scope.row['销售毛利率']&&scope.row['销售毛利率'].toFixed(2)+"%"||'-'  }}

                            </span>
                        </el-tooltip>



                    </template>

                </el-table-column>

            </el-table>

 
            <template #footer>

                <div style="display: flex;justify-content: center;">
                    <el-pagination :page-sizes="[10, 20, 30, 50]" layout="sizes, prev, pager, next" @size-change="sc"
                        @current-change="cc" v-model:current-page="listInfo.cpage" v-model:page-size="listInfo.pageSize"
                        background :total="listInfo.total" />
                </div>
            </template>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, watch, nextTick } from "vue"
import { resetAble } from "../../composable/reset"
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { getRandomCode, getBill, dataExport, getTotalAmount } from "../../api/bill";
import { getSocks ,getindustriesList} from "../../api/socks"

import { rolepathName } from "../../composable/dealname";

import "@vue-office/excel/lib/index.css"
import currency from "currency.js";

const previewType = ref("")


// <el-icon><DeleteFilled /></el-icon>
// <el-icon><Download /></el-icon>
const { data: queryParams, reset: resetQueryParams }: any = resetAble({

})
const addProduct = () => {
    if (productList.value == 0) {
        return ElMessage.error('请先添加产品信息')
    }
    let id = productList.value[0].value
    let price = productList.value[0].price
    if (price.length == 0) {
        return ElMessage.error('请先添加产品价格')
    }
    formData.value.product.push({
        pid: id,
        price: price[0],
        number: 1
    })

    document.querySelector('.sform')?.scrollTo(0, 10000)
}
// const columns = [
//     {
//         title: '序号',
//         dataKey:'序号',
//         width: 80,
//         align: 'center',
//         fixed: 'left',
//     }, 
//     {
//         title: '股票简称',
//         dataKey:'股票简称',
//         width: 100, 
//         align: 'center',
//         fixed: 'left'
//     },
//     {
//         title: '所属行业',
//         dataKey:'所属行业',
//         width: 100, 
//     },
//     {
//         title: '最新公告日期',
//         dataKey:'最新公告日期',
//         width: 100, 
//     },
//     {
//         title: '净利润',
//         dataKey:'净利润',
//         width: 100,
//     },
//     {
//         title: '净利润同比增长',
//         dataKey:'净利润同比增长',
//         width: 100,
//     },
//     {
//         title: '净利润季度环比增长',
//         dataKey:'净利润季度环比增长',
//         width: 100,
//     },
//     {
//         title: '净资产收益率',
//         dataKey:'净资产收益率',
//         width: 100,
//     },
//     {
//         title: '每股净资产',
//         dataKey:'每股净资产',
//         width: 100,
//     },
//     {
//         title: '每股收益',
//         dataKey:'每股收益',
//         width: 100,
//     },
//     {
//         title: '每股经营现金流',
//         dataKey:'每股经营现金流',
//         width: 100,
//     },
//     {
//         title: '营业收入同比增长',
//         dataKey:'营业收入同比增长',
//         width: 100,
//     },
//     {
//         title: '营业收入季度环比增长',
//         dataKey:'营业收入季度环比增长',
//         width: 100,
//     },
//     {
//         title: '营业收入',
//         dataKey:'营业收入',
//         width: 100,
//     },
//     {
//         title: '销售毛利率',
//         dataKey:'销售毛利率',
//         width: 100,
//     },
 
// ]

const sc = (e: any) => {

    listInfo.value.pageSize = e
    init()
}
const cc = (e: any) => {

    listInfo.value.cpage = e
    init()
}


const totalsum = ref<any>({})

const handleCalculate = async () => {
    await getTotalAmount({
        data: queryParams.value,
        params: {
            currentPage: listInfo.value.cpage,
            pageSize: listInfo.value.pageSize
        }
    }).then(res => {

        totalsum.value = res.data
        previewType.value = 'suminfo'
        scontent.value = '总额信息'
        proxy.$refs.sdialog.showCenterDialog = true
    })
}

const IdataExport = async () => {
    dataExport({
        data: queryParams.value,
        params: {
            currentPage: listInfo.value.cpage,
            pageSize: listInfo.value.pageSize
        }
    })
};
//nodekoa后端对queryParams数据进行搜索如何写？


const handleQuery = () => {

    console.log(queryParams.value)
    init().then(() => {
        ElMessage({
            message: '查询成功',
            grouping: true,
            type: 'success',
        })
    })
}
const handleReset = () => {
    resetQueryParams()
    init().then(() => {
        ElMessage({
            message: '重置成功',
            grouping: true,
            type: 'success',
        })
    })
}

const validateNumber = (field: string) => {
    queryParams.value[field] = queryParams.value[field] && queryParams.value[field].replace(/\D/g, '')
    queryParams.value[field] = queryParams.value[field] && queryParams.value[field].toString().replace(/^0+/, '') || 0;
}

const dialogVisible = ref(false)
const { proxy } = getCurrentInstance() as any
const { data: formData, reset } = resetAble({
    checkTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    code: "",
    id: "",
    amount: 0,
    name: "",
    rate: "",
    preamount: 0,
    phone: "",
    product: [],
    invoice: '',
    PaymentMethodP: 0,
    PaymentMethodD: 30,
    DeliveryAddress: '',
    ShippingDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    padid: 0,
    isStart: false,
    isSend: false,
    arrearage: 0,
    fileList: []
}) as any
const sumnumber = () => {

    //动态根据产品计算金额
    formData.value.amount = formData.value.product.reduce((pre: any, cur: any) => {
        return pre + cur.price * cur.number
    }, 0)
}

// const ttw = () => {
//     //获取sform滚动高度
//     let scrollTop = (document as any).querySelector('.sform').scrollTop;
//     showRedLine.value = scrollTop === 0;

// }
const handleForm = async (id?: string) => {

    if (id) {
        formData.value.id = id
        await getBill({ id }).then((res: any) => {
            formData.value = res.data
            formData.value.id = formData.value._id
            formData.value.ShippingDate = dayjs(res.data.ShippingDate).format('YYYY-MM-DD')
            formData.value.checkTime = dayjs(res.data.checkTime).format('YYYY-MM-DD HH:mm:ss')
            formData.value.product = formData.value.product.map((e: any) => {
                return {
                    pid: e.pid,
                    price: e.price[0],
                    number: e.number
                }

            })
            console.log(formData.value.product, 'formData.value.product ')
            calculateArrearage()
            dialogVisible.value = true
        })


    } else {
        IgetRandomCode().then(() => {
            addProduct()
            dialogVisible.value = true
        })
        reset()
    }

}




const calculateArrearage = () => {

    formData.value.arrearage = formData.value.amount - (formData.value.amount * (formData.value.PaymentMethodP / 100)) - formData.value.padid;
    if (formData.value.arrearage < 0) {
        formData.value.PaymentMethodP = 0
        formData.value.padid = 0
        formData.value.arrearage = formData.value.amount - (formData.value.amount * (formData.value.PaymentMethodP / 100)) - formData.value.padid;
        return ElMessage.error('已付货款和预付货款总和不能大于总金额(含税)')
    }
    formData.value.arrearage = formData.value.arrearage.toFixed(2)
}

const scontent = ref<any>(null)



const listInfo = ref({
    list: [],
    total: 0,
    cpage: 1,
    pageSize: 10
})

let sheight=ref(0)
const init =async () => {
    await nextTick(()=>{
        let allHeight=window.innerHeight
        sheight.value=allHeight- 250
})
getindustriesList().then((res: any) => {
    productList.value = res.data.map((e: any) => {
        return {
            label:`${e['所处行业']}(${e.count}家公司)`,
            value: e._id
        }
    })})

    return new Promise<void>((resolve, reject) => {
        getSocks({
            data: queryParams.value,
            params: {
                currentPage: listInfo.value.cpage,
                pageSize: listInfo.value.pageSize
            }
        }

        ).then((res) => {
            console.log(res, 'res')
            if (res) {
                listInfo.value.list = res.data.list
                listInfo.value.total = res.data.total
            }
            resolve()
        }).catch(err => {
            reject(err)
        })
    })





}
const productList = ref<any>([])
const IgetRandomCode = () => {
    return new Promise<void>(async (resolve, reject) => {
        await getRandomCode().then((res) => {
            if (res) {
                formData.value.code = res.data
                resolve()
            }
        }).catch(() => {
            reject()
        })
    })

}
watch(() => formData.value.product, () => {
    sumnumber()
}, { deep: true, })

init()
</script>
<style lang="scss" scoped>
:deep(.el-icon) {
    font-style: normal;
    font-weight: bolder;
}
</style>